<template>
  <div class="login">
    <div class="login-from">
      <div class="title">忘记密码</div>
      <el-form ref="form" :model="form" :rules="rules" class="flex-column">
        <el-form-item prop="mobile">
          <div class="flex-row align-items-center justify-content-center">
            <i class="el-icon-mobile-phone" style="font-size:22px;"></i>
            <el-input v-model="form.mobile" :maxlength="11" placeholder="请输入手机号" style="width:60%;"></el-input>
          </div>
        </el-form-item>
        <el-form-item prop="password">
          <div class="flex-row align-items-center justify-content-center">
            <i class="el-icon-lock" style="font-size:22px;"></i>
            <el-input
              v-model="form.password"
              type="password"
              placeholder="请输入新密码"
              style="width:60%;"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item prop="code">
          <div class="flex-row align-items-center justify-content-center">
            <i class="el-icon-chat-line-round" style="font-size:22px;"></i>
            <el-input v-model="form.code" type="text" placeholder="请输入验证码" style="width:40%;"></el-input>
            <el-link
              type="primary"
              style="margin-left:10px;font-size:12px;"
              @click="iSlideVerify"
              :disabled="!canClick"
            >{{codemsg}}</el-link>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('form')" class="login-btn">确 定</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="350px" @touchmove.prevent>
      <slide-verify
        :l="42"
        :r="10"
        :w="310"
        :h="155"
        @success="onSuccess"
        @fail="onFail"
        @refresh="onRefresh"
        :slider-text="text"
        ref="slideblock"
      ></slide-verify>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {},
  data () {
    return {
      form: {
        mobile: '',
        password: '',
        code: ''
      },
      rules: {
        mobile: [
          {
            required: true,
            message: '请输入正确的手机号码',
            trigger: 'blur',
            pattern: /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/
          },
          { min: 11, max: 11, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入新密码', trigger: 'blur' }
        ],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      text: '向右滑',
      codemsg: '获取验证码',
      totalTime: 60,
      canClick: true, // 添加canClick
      dialogVisible: false
    }
  },
  computed: {},
  created () {},
  mounted () {},
  watch: {},
  methods: {
    onSubmit (formName) {
      // console.log("submit!");
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.resetPassword()
        } else {
          // console.log("error submit!!");
          return false
        }
      })
    },
    onSuccess () {
      this.$refs.slideblock.reset()
      this.dialogVisible = !this.dialogVisible
      this.getVerifyCode()
      this.countDown()
    },
    onFail () {
      this.msg = ''
    },
    onRefresh () {
      this.msg = ''
    },
    iSlideVerify () {
      var regu = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/
      var re = new RegExp(regu)
      if (this.canClick && re.test(this.form.mobile)) {
        this.dialogVisible = !this.dialogVisible
      }
    },
    countDown () {
      if (!this.canClick) {
        return
      } // 改动的是这两行代码
      this.canClick = false
      this.codemsg = this.totalTime + 's重新发送'
      let clock = window.setInterval(() => {
        this.totalTime--
        this.codemsg = this.totalTime + 's重新发送'
        if (this.totalTime < 0) {
          window.clearInterval(clock)
          this.codemsg = '重新发送'
          this.totalTime = 60
          this.canClick = true // 这里重新开启
        }
      }, 1000)
    },
    getVerifyCode () {
      let rsaStr = `mobile=${this.form.mobile}&type=resetpwd`
      this.$getCode(rsaStr)
        .then(rsaCode => {
          this.http
            .getVerifyCode(rsaCode)
            .then(res => {
              // console.log(res);
              if (res.data.errno === '000') {
                this.$message({
                  message: res.data.errmsg,
                  type: 'success'
                })
              } else {
                this.$message({
                  message: res.data.errmsg,
                  type: 'error'
                })
              }
            })
            .catch(err => {})
        })
        .catch(err => {})
    },
    resetPassword () {
      let rsaStr = `mobile=${this.form.mobile}&pwd=${this.form.password}&code=${this.form.code}&is_web=1`
      this.$getCode(rsaStr)
        .then(rsaCode => {
          this.http
            .postResetpwd(rsaCode)
            .then(res => {
              // console.log(res);
              if (res.data.errno === '000') {
                this.$message({
                  message: res.data.errmsg,
                  type: 'success'
                })
                sessionStorage.setItem('token', res.data.result.data.auth)
                sessionStorage.setItem('u', res.data.result.data.uuid)
                sessionStorage.setItem('level', res.data.result.data.level)
                sessionStorage.setItem(
                  'grade_expire_time',
                  res.data.result.data.grade_expire_time
                )
                sessionStorage.setItem('id', res.data.result.data.id)
                this.$store.commit(
                  'Member/pushCollects',
                  res.data.result.data.id
                )
                this.$router.push({
                  path: '/index'
                })
              } else {
                this.$message({
                  message: res.data.errmsg,
                  type: 'error'
                })
              }
            })
            .catch(err => {})
        })
        .catch(err => {})
    }
  },
  components: {}
}
</script>

<style scoped lang="less">
@import url("./index.less");
</style>

<style>
.el-form-item__error {
  /* width: 100%; */
  left: 25% !important;
  text-align: center;
}
</style>
